<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>144_联系_选择框</title>
		<script>
			/* 全选功能
				取消
				反选
				提交
			 */
			window.onload = function() {
				const hobbies = document.getElementsByName("hobby");

				const checkAll = document.getElementById("check-all")
				const allBtn = document.getElementById("all");
				const noBtn = document.getElementById("no")
				const reverseBtn = document.getElementById("reverse");
				const submitBtn = document.getElementById("submit")

				checkAll.onclick = function() {
					console.log("您的爱好是");
				}
				checkAll.addEventListener("change", function() {
					console.log("您的爱好是");
				})
				allBtn.onclick = function() {
					for (let i = 0; i < hobbies.length; i++) {
						hobbies[i].checked = true;
					}
				}

				noBtn.onclick = function() {
					for (let i = 0; i < hobbies.length; i++) {
						hobbies[i].checked = false;
					}
				}

				reverseBtn.onclick = function() {
					for (let i = 0; i < hobbies.length; i++) {
						hobbies[i].checked = !hobbies[i].checked;
					}
				}

				submitBtn.onclick = function() {
					let seletStr = "";
					for (let i = 0; i < hobbies.length; i++) {
						if (hobbies[i].checked)
							seletStr = seletStr + hobbies[i].value
					}
					console.log("您的爱好是", seletStr);
				}
			}
		</script>
	</head>
	<body>
		<div>
			<form action="#">
				请选择你的兴趣爱好<input id="check-all" type="checkbox" />全选
				<div>
					<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
					<input type="checkbox" name="hobby" value="乒乓球" />篮球
					<input type="checkbox" name="hobby" value="乒乓球" />羽毛球
					<input type="checkbox" name="hobby" value="乒乓球" />足球
				</div>
				<div>
					<button type="button" id="all">全选</button>
					<button type="button" id="no">取消</button>
					<button type="button" id="reverse">反选</button>
					<button type="button" id="submit">提交</button>
				</div>
			</form>
		</div>
	</body>
</html>